<template>
  <div style="padding:20px;">
    <!-- 条件查询的表单：收集查询条件 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item >
        <!-- 收集的数据查询时 在后端会作为查询sql的条件进行使用，
        为了前后照应，建议前端的数据的key和后端数据库表对应bean的字段一样 -->
        <el-input v-model="searchObj.name" placeholder="讲师姓名"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchObj.level" placeholder="讲师级别">
          <el-option label="高级讲师" value="1"/>
          <el-option label="首席讲师" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker
          v-model="searchObj.joinDateBegin"
          type="date"
          placeholder="起始日期"/>
        --
        <el-date-picker
          v-model="searchObj.joinDateEnd"
          type="date"
          placeholder="结束日期"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="querByCondition">查询</el-button>
        <el-button @click="clear">清除</el-button>
      </el-form-item>
    </el-form>
    <!-- 批量删除按钮 -->
    <div style="text-align:right;margin-right:20px">
      <el-button type="danger" @click="handlBatchDel">批量删除</el-button>
    </div>
    <!-- 页面标签 -->
    <el-table
      :data="teachers"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        type="index"
        width="50"/>
      <el-table-column
        prop="name"
        label="姓名"
        width="100"/>
      <el-table-column
        prop="avatar"
        label="头像"
        width="110">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width:100px;height:100px">
          <img v-else src="https://online12138.oss-cn-shanghai.aliyuncs.com/avatar/21/10/14/c4a6e457891b458b8a658b75fc68baec.jpg" style="width:100px;height:100px">
        </template>
      </el-table-column>
      <el-table-column
        prop="career"
        show-overflow-tooltip
        label="资历"/>
      <el-table-column
        prop="level"
        label="头衔"
        width="200">
        <template slot-scope="scope">
          <el-tag :type="scope.row.level===1?'success':'danger'">{{ scope.row.level===1?'高级讲师':'首席讲师' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        width="80"/>
      <el-table-column
        prop="joinDate"
        label="入驻时间"
        width="200"/>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:center;margin-top:200px">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="pageSize"
        :total="pageTotal"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script>
import teacherApi from '@/api/teacher'
// js脚本
export default {
  data() {
    return {
      checkedTeacher: [], // 代表选中要删除的集合
      searchObj: {}, // 收集查询条件的对象
      teachers: [],
      pageNum: 1,
      pageSize: 5,
      pageTotal: 0
    }
  },
  created() {
    // 查询讲师列表显示
    // this.getTeacher()
    this.getPage()
  },
  methods: {

    // 批量删除按钮单击事件
    handlBatchDel() {
      if (this.checkedTeacher.length === 0) {
        this.$message.warning('请选中要删除的讲师')
        return
      }
      // 获取选中要删除讲师id的集合
      const ids = []
      this.checkedTeacher.forEach(t => { ids.push(t.id) })
      // 提交批量删除请求
      teacherApi.batchDel(ids).then(r => {
        this.$message.success('删除成功')
        // 查询新数据
        this.getPage()
      })
    },
    // 表格 当选择项发生变化时会触发该事件
    handleSelectionChange(v) {
      console.log('选择发生改变：', v)
      // 获取选中行的json对象的集合
      this.checkedTeacher = v
    },
    // 清空查询条件的按钮事件
    clear() {
      this.searchObj = {}
      this.pageSize = 3
      this.pageNum = 1
      this.getPage()
    },
    // 待条件查询单击按钮事件
    querByCondition() {
      this.getPage()
    },
    // 分页导航条事件
    handleSizeChange(size) { // 分页导航条的size值改变时回调，并传入修改后的size的值
      console.log('size:' + size)
      this.pageSize = size
      this.getPage()
    },
    handleCurrentChange(num) { // 页码改变时 回调，并传入修改后的页码的值
      console.log('num:' + num)
      this.pageNum = num
      this.getPage()
    },
    // 分页查询函数
    getPage() {
      teacherApi.page(this.pageNum, this.pageSize, this.searchObj).then(r => {
        console.log(r.data.page)
        this.teachers = r.data.page.records// 获取分页对象中的 分页数据列表
        this.pageTotal = r.data.page.total
      })
    },
    // 处理编辑单击事件函数
    handleEdit(index, teacher) {
      // console.log(teacher)
      // 跳转到form页面 并将讲师id携带给下个页面
      /*
        路径参数：/teacher/edit/id
        请求参数：/teacher/edit?id=xxx
      */
      // this.$router.push('/teacher/edit?id=' + teacher.id)
      this.$router.push('/teacher/edit/' + teacher.id)
    },
    // 处理删除单击事件函数
    handleDelete(index, teacher) {
      this.$confirm(`此操作将永久删除${teacher.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除api方法 传入要删除的讲师id
        teacherApi.deleteById(teacher.id).then(r => {
          this.$message.success('删除成功')
          // 刷新
          this.getTeacher()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getTeacher() {
      teacherApi.list().then(r => { // 封装后的工具axios实例请求返回的结果就是 响应对象的响应体数据(r对象)
        this.teachers = r.data.items
      })
    }
  }
}
</script>
<style>
/* css样式 */
</style>
